<ion-header>
  <ion-toolbar mode="ios" color="care">
    <ion-buttons>
      <ion-back-button defaultHref="/"></ion-back-button>
    </ion-buttons>
    <ion-title>{{ 'RegistionTime' | translate }}</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-item detail (click)="selectDate()">
    <ion-label>{{ 'ChooseDate' | translate }}</ion-label>
    <ion-text color="medium" slot="end">{{appointDate}}</ion-text>
  </ion-item>

  <ion-item *ngIf="appointDate">
    <ion-button slot="end" color="warning" (click)="onResetOrderList()">{{ 'RESET' | translate }}</ion-button>
  </ion-item>

  <ion-list>
    <ion-radio-group [(ngModel)]="selectValue" (ionChange)='selectList()'>
        <ion-item *ngFor="let item of dataList" (click)="onItemSelect(item)">
          <ion-label>
            <h3>{{ 'From' | translate}} {{item.start_time}}</h3>
            <h3>{{ 'To' | translate}} {{item.end_time}}</h3>
          </ion-label>
          <ion-radio mode="md" color="care" slot="start" [value]="item.id"></ion-radio>
          <ion-text slot="end">{{item.order_cost}}RMB</ion-text>
        </ion-item>
      </ion-radio-group>
  </ion-list>

  <ion-button shape="round" color="care" expand="block" (click)="onWxPaymentRequest()" *ngIf="!!selectValue">{{ 'Pay' | translate }}</ion-button>
</ion-content>
